<%@ page import="java.sql.ResultSet" %>
<%@ page import="java.sql.Statement" %>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.util.ArrayList" %><%--
  Created by IntelliJ IDEA.
  User: luruotong
  Date: 2022/12/9
  Time: 16:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<html>--%>
<%--  <head>--%>
<%--    <title>$Title$</title>--%>
<%--  </head>--%>
<%--  <body>--%>
<%--  $END$--%>
<%--  </body>--%>
<%--</html>--%>
<!DOCTYPE html>
<html>
<head>
  <%
    // 1.装载数据驱动


    //2.连接数据库
    //数据库名：stuInfo
    //账号名：root
    //密码：root
    Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/mydb", "root", "root");

    //3.创建语句对象
    Statement stmt = con.createStatement();

    //4.执行SQL语句
    String sql = "select * from t_user;";
    //返回ResultSet实例化对象
    ResultSet rs = stmt.executeQuery(sql);
    ArrayList<Integer> boys = new ArrayList<>();
    ArrayList<Integer> girls = new ArrayList<>();
    //5.处理结果
    while (rs.next()) {
      boys.add(rs.getInt(1));
      girls.add(rs.getInt(2));
    }
    
    //6.关闭数据库
    //关闭结果集
    rs.close();
    //关闭操作
    stmt.close();
    //关闭连接
    con.close();
  %>

  <meta charset="utf-8">
  <!-- 引入 ECharts 文件 -->
  <script src="./js/echarts.js"></script>
  <div id="pie1" style="width: 600px;height:400px;"></div>
  <div id="pie2" style="width: 600px;height:400px;"></div>
  <script type="text/javascript">
    var myChart1 = echarts.init(document.getElementById('pie1'));
    option1 = {
      title:{
        text:'展示男女生各自总人数饼状图',
        top:'bottom',
        left:'center',
        textStyle:{
          fontSize: 14,
          fontWeight: '',
          color: '#333'
        },
      },//标题
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)",
    /*formatter:function(val){   //让series 中的文字进行换行
         console.log(val);//查看val属性，可根据里边属性自定义内容
         var content = var['name'];
         return content;//返回可以含有html中标签
     },*/ //自定义鼠标悬浮交互信息提示，鼠标放在饼状图上时触发事件
    },//提示框，鼠标悬浮交互时的信息提示
    legend: {
      show: false,
              orient: 'vertical',
              x: 'left',
              data: ['', '', '']
    },//图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配
    graphic:{
      type:'text',
              left:'center',
              top:'center',
              style:{
        text:'展示男女生各自总人数饼状图', //使用“+”可以使每行文字居中
                textAlign:'center',
                font:'italic bolder 16px cursive',
                fill:'#000',
                width:30,
                height:30
      }
    },//此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多
    series: [
      {
        name:'展示男女生各自总人数饼状图',//tooltip提示框中显示内容
        type: 'pie',//图形类型，如饼状图，柱状图等
        radius: ['35%', '65%'],//饼图的半径，数组的第一项是内半径，第二项是外半径。支持百分比，本例设置成环形图。具体可以看文档或改变其值试一试
        //roseType:'area',是否显示成南丁格尔图，默认false
        itemStyle: {
          normal:{
            label:{
              show:true,
              textStyle:{color:'#3c4858',fontSize:"18"},
              formatter:function(val){   //让series 中的文字进行换行
                return val.name.split("-").join("\n");}
            },//饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
            labelLine:{
              show:true,
              lineStyle:{color:'#3c4858'}
            }//线条颜色
          },//基本样式
          emphasis: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)',//鼠标放在区域边框颜色
            textColor:'#000'
          }//鼠标放在各个区域的样式
        },
        data: [
          {value: <%=boys.get(0)%>, name: ' tom'},
          {value: <%=boys.get(1)%>, name: 'kim'},
          {value: <%=boys.get(2)%>, name: ' Jennie'},



        ],//数据，数据中其他属性，查阅文档
        // color: ['#51CEC6','#FFB703','#5FA0FA'],//各个区域颜色
      },//数组中一个{}元素，一个图，以此可以做出环形图
    ],//系列列表
    };
    myChart1.setOption(option1);


    var myChart2 = echarts.init(document.getElementById('pie2'));
    option2 = {
      title:{
        text:'展示男女生各自总人数饼状图',
        top:'bottom',
        left:'center',
        textStyle:{
          fontSize: 14,
          fontWeight: '',
          color: '#333'
        },
      },//标题
      tooltip: {
        trigger: 'item',
        formatter: "{a} <br/>{b}: {c} ({d}%)",
        /*formatter:function(val){   //让series 中的文字进行换行
             console.log(val);//查看val属性，可根据里边属性自定义内容
             var content = var['name'];
             return content;//返回可以含有html中标签
         },*/ //自定义鼠标悬浮交互信息提示，鼠标放在饼状图上时触发事件
      },//提示框，鼠标悬浮交互时的信息提示
      legend: {
        show: false,
        orient: 'vertical',
        x: 'left',
        data: ['', '', '']
      },//图例属性，以饼状图为例，用来说明饼状图每个扇区，data与下边series中data相匹配
      graphic:{
        type:'text',
        left:'center',
        top:'center',
        style:{
          text:'展示各学期男女生人数', //使用“+”可以使每行文字居中
          textAlign:'center',
          font:'italic bolder 16px cursive',
          fill:'#000',
          width:30,
          height:30
        }
      },//此例饼状图为圆环中心文字显示属性，这是一个原生图形元素组件，功能很多
      series: [
        {
          name:'展示各学期男女生人数',//tooltip提示框中显示内容
          type: 'pie',//图形类型，如饼状图，柱状图等
          radius: ['35%', '65%'],//饼图的半径，数组的第一项是内半径，第二项是外半径。支持百分比，本例设置成环形图。具体可以看文档或改变其值试一试
          //roseType:'area',是否显示成南丁格尔图，默认false
          itemStyle: {
            normal:{
              label:{
                show:true,
                textStyle:{color:'#3c4858',fontSize:"18"},
                formatter:function(val){   //让series 中的文字进行换行
                  return val.name.split("-").join("\n");}
              },//饼图图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。可以与itemStyle属性同级，具体看文档
              labelLine:{
                show:true,
                lineStyle:{color:'#3c4858'}
              }//线条颜色
            },//基本样式
            emphasis: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)',//鼠标放在区域边框颜色
              textColor:'#000'
            }//鼠标放在各个区域的样式
          },
          data: [
            {value: <%=girls.get(0)%>, name: '202001'},
            {value: <%=girls.get(1)%>, name: '202002'},


          ],//数据，数据中其他属性，查阅文档
          // color: ['#51CEC6','#FFB703','#5FA0FA'],//各个区域颜色
        },//数组中一个{}元素，一个图，以此可以做出环形图
      ],//系列列表
    };
    myChart2.setOption(option2);
  </script>
</head>
</html>
